<template>
  <div>
    <div
      v-for="(item, index) in res"
      :key="index"
      class="goods-row"
      @click="navigateToDetailPage(item)"
    >
      <div class="flex goods-col">
        <div class="goods-img">
          <u-image
            width="224rpx"
            mode="aspectFit"
            border-radius="16"
            height="224rpx"
            :src="item.goodsImage || item.thumbnail"
          >
            <u-loading slot="loading"></u-loading>
          </u-image>
        </div>
        <div class="goods-detail">
          <div class="title clamp3 u-line-1">{{ item.goodsName }}</div>
          <div class="remain-box">仅剩多少件</div>
          <div class="flex flex-a-c flex-j-sb" v-if="nav == 0">
            <view class="price-box" v-if="!type && item.price != undefined">
              <!-- 秒杀 / 拼团 -->
              <div class="price">
                ¥<span
                  >{{ $options.filters.goodsFormatPrice(item.price)[0] }} </span
                >.{{ $options.filters.goodsFormatPrice(item.price)[1] }}
              </div>
              <span class="count-config"
                >即将恢复原价{{ item.originalPrice }}元</span
              >
            </view>
            <view
              class="price-box"
              v-if="type && item.purchasePrice != undefined"
            >
              <!-- 砍价 -->
              <div class="price">
                最低： ¥<span
                  >{{
                    $options.filters.goodsFormatPrice(item.purchasePrice)[0]
                  }} </span
                >.{{ $options.filters.goodsFormatPrice(item.purchasePrice)[1] }}
              </div>
              <!-- 兜底策略如果金额是0 -->
              <div class="price" v-if="!item.price && !type">
                ¥<span>0 </span>.00
              </div>
            </view>
          </div>
          <div class="wait-box" v-else>
            <div class="wait-left">
              <span>优惠前</span>
              <span class="price">￥<span class="text">99.9</span> </span>
            </div>
            <div class="wait-right">￥<span class="price">67</span>.99</div>
            <img src="/static/wait_buy.png" alt="" />
          </div>
          <div class="time-box" v-if="!type">
            <div class="left">
              <div class="text">{{ getIsTimer(item) }}</div>
              <u-count-down
                :hide-zero-day="true"
                font-size="22"
                color="#fff"
                bg-color="#FF152D"
                separator-size="25"
                separator-color="#FF152D"
                :show-hours="true"
                :show-minutes="true"
                :timestamp="getCountDownTime(item.endTime)"
              ></u-count-down>
            </div>
            <img class="right" src="/static/buy.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commonTpl from "@/components/m-goods-list/common";
export default {
  data() {
    return {
      lightColor: this.$mainColor,
      buy: require("@/static/buy.png"),
    };
  },
  mixins: [commonTpl],
  props: {
    // 遍历的数据
    res: {
      type: Array,
      default: () => {
        return [];
      },
    },
    type: {
      type: null,
      default: "",
    },
    nav: {
      type: null,
      default: 0,
    },
  },
  methods: {
    getCountDownTime(val) {
      let date = new Date(val);
      let timeSimple = new Date(date).getTime() / 1000;
      return timeSimple - new Date().getTime() / 1000;
    },
    getIsTimer(val) {
      var timestamp = new Date().getTime();

      if (timestamp < val.start_time) {
        this.startTimer = true;
        return "距离开始";
      } else {
        return "剩余时间";
      }
    },
    // 跳转到商品详情
    navigateToDetailPage(item) {
      if (this.type == "kanJia") {
        uni.navigateTo({
          url: `/pages/promotion/bargain/detail?id=${item.id}`,
        });
        return;
      }
      uni.navigateTo({
        url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.wait-box {
  width: 100%;
  height: 92rpx;
  background-color: #fff;
  display: flex;
  position: relative;
  margin-top: 44rpx;
  .wait-left {
    width: 101rpx;
    height: 92rpx;
    background: #f5f5f5;
    background: linear-gradient(-85deg, transparent 8rpx, #f5f5f5 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20rpx;
    color: #757575;
    box-sizing: border-box;
    padding: 0 0 8rpx 10rpx;
    .price {
      font-size: 24rpx;
      margin-top: 4rpx;
    }
    .text {
      font-size: 28rpx;
    }
  }
  .wait-right {
    width: 370rpx;
    height: 92rpx;
    background: #e9f9eb;
    background: linear-gradient(95deg, transparent 8rpx, #e9f9eb 0);
    font-size: 28rpx;
    color: #00bf74;
    display: flex;
    align-items: end;
    box-sizing: border-box;
    padding: 0 0 14rpx 28rpx;
    .price {
      font-size: 40rpx;
      font-weight: bold;
    }
  }
  img {
    position: absolute;
    right: 0;
    top: 0;
    height: 92rpx;
  }
}
.buy {
  width: 152rpx;
  height: 108rpx;
}
.flex-j-sb {
  width: 100%;
}
.goods-row {
  background: #fff;
  padding: 12rpx;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  > .goods-col {
    display: flex;
    > .goods-img {
      overflow: hidden;
      //   flex: 4;
    }
    > .goods-detail {
      //   flex: 7;
    }
  }
}
.goods-detail {
  margin-left: 20rpx;
  flex: 1;
  > .title {
    font-size: 28rpx;
    color: #212121;
    line-height: 1.5;
    margin-bottom: 16rpx;
    max-width: 446rpx;
  }
  .remain-box {
    font-size: 26rpx;
    color: #757575;
    margin-bottom: 22rpx;
  }

  .promotion {
    margin-top: 4rpx;
    display: flex;

    div {
      span {
        font-size: 24rpx;
        color: $light-color;
        margin-right: 10rpx;
        padding: 0 4rpx;
        border-radius: 2rpx;
      }
    }
  }

  .count-config {
    margin: 5rpx 10rpx 0;
    display: flex;
    font-size: 26rpx;
    letter-spacing: 2rpx;
  }
}

.price-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24rpx;
  color: #212121;

  > .price {
    font-size: 34rpx;
    line-height: 1;
    color: #ff152d;
    font-weight: bold;

    ::v-deep span:nth-of-type(1) {
      font-size: 48rpx;
    }
  }
}
.time-box {
  margin-top: 22rpx;
  background: #fff5f3;
  width: 442rpx;
  height: 50rpx;
  display: flex;
  align-content: center;
  justify-content: space-between;
  padding-left: 16rpx;
  box-sizing: border-box;
  .left {
    display: flex;
    align-content: center;
    justify-content: center;
    .text {
      color: #ff152d;
      font-size: 22rpx;
      line-height: 50rpx;
      margin-right: 12rpx;
    }
  }
  .right {
    height: 50rpx;
  }
}
</style>
